<template>
  <div class="travels">
    <div class="travels-content">
      <van-form ref="travelsForm" :disabled="oper === 'view'">
        <van-field
          v-model="obj.travels[0].travelStart"
          label="开始日期"
          placeholder="请选择日期"
          input-align="right"
          readonly
          required
          right-icon="arrow"
          :rules="[{ required: true, message: '请选择开始日期' }]"
          @click="isShowPickerDate1 = true"
        />
        <van-popup v-model:show="isShowPickerDate1"  position="bottom">
          <van-date-picker v-model="currentDate1" type="date" @cancel="isShowPickerDate1 = false" @confirm="onConfirmDate1" />
        </van-popup>
        <van-field
          v-model="obj.travels[0].travelEnd"
          label="结束日期"
          placeholder="请选择日期"
          input-align="right"
          readonly
          required
          right-icon="arrow"
          :rules="[{ required: true, message: '请选择结束日期' }]"
          @click="isShowPickerDate2 = true"
        />
        <van-popup v-model:show="isShowPickerDate2"  position="bottom">
          <van-date-picker v-model="currentDate2" type="date" @cancel="isShowPickerDate2 = false" @confirm="onConfirmDate2" />
        </van-popup>
        <van-field
          v-model="obj.travels[0].travelPositionStart"
          label="开始地点"
          placeholder="请输入开始地点"
          input-align="right"
          required
          :rules="[{ required: true, message: '请输入开始地点' }]"
        />
        <van-field
          v-model="obj.travels[0].travelPositionEnd"
          label="结束地点"
          placeholder="请输入结束地点"
          input-align="right"
          required
          :rules="[{ required: true, message: '请输入结束地点' }]"
        />
        <van-field
          v-model="obj.travels[0].travelPeople"
          label="出差人"
          placeholder="请输入出差人"
          input-align="right"
          required
          :rules="[{ required: true, message: '请输入出差人' }]"
        />
        <van-field
          v-model.number="obj.travels[0].travelNum"
          label="出差人数"
          placeholder="请输入出差人数"
          input-align="right"
          type="digit"
          @blur="calcTotal(obj.travels[0])"
          required
          :rules="[{ required: true, message: '请输入出差人数' }]"
        />
        <van-field
          v-model="travelRankName"
          label="职级"
          readonly
          required
          placeholder="请选择"
          input-align="right"
          right-icon="arrow"
          @click="showPicker1 = true"
        />
        <van-popup v-model:show="showPicker1" round position="bottom">
          <van-picker
            :columns="getDictList('UserRank')"
            :columns-field-names="{text: 'value', value: 'key'}"
            @cancel="showPicker1 = false"
            @confirm="onConfirmPicker1"
          />
        </van-popup>
        <van-divider v-if="expenditureTravelQuotaDesc" />
        <div class="report-form-list-content" v-if="expenditureTravelQuotaDesc">
          <text>职级差旅限额(每人)：{{ expenditureTravelQuotaDesc }}</text>
        </div>
        <van-divider v-if="expenditureTravelQuotaDesc" />
        <van-field
          v-model.number="obj.travels[0].amountPlane"
          label="机票费(每人)"
          placeholder="请输入机票费"
          input-align="right"
          type="number"
          @blur="calcTotal(obj.travels[0])"
          required
          :rules="[{ required: true, message: '请输入机票费' }]"
        />
        <van-field
          v-model.number="obj.travels[0].amountTrain"
          label="动车火车费(每人)"
          placeholder="请输入动车火车费"
          input-align="right"
          type="number"
          @blur="calcTotal(obj.travels[0])"
          :label-width="120"
          required
          :rules="[{ required: true, message: '请输入动车火车费' }]"
        />
        <van-field
          v-model.number="obj.travels[0].amountShip"
          label="车船费(每人)"
          placeholder="请输入车船费"
          input-align="right"
          type="number"
          @blur="calcTotal(obj.travels[0])"
          required
          :rules="[{ required: true, message: '请输入车船费(每人)' }]"
        />
        <van-field
          v-model.number="obj.travels[0].amountCatering"
          label="差旅补助(每人)"
          placeholder="请输入车船费"
          input-align="right"
          disabled
          type="number"
          @blur="calcTotal(obj.travels[0])"
          :label-width="120"
          required
          :rules="[{ required: true, message: '请输入差旅补助' }]"
        />
        <van-field
          v-model.number="obj.travels[0].amountHotel"
          label="住宿费(每人)"
          placeholder="请输入住宿费(每人)"
          input-align="right"
          type="number"
          @blur="calcTotal(obj.travels[0])"
          required
          :rules="[{ required: true, message: '请输入住宿费' }]"
        />
        <van-field
          v-model.number="obj.travels[0].amountCar"
          label="市内交通费(合计)"
          :label-width="120"
          placeholder="请输入市内交通费"
          input-align="right"
          type="number"
          @blur="calcTotal(obj.travels[0])"
          required
          :rules="[{ required: true, message: '请输入市内交通费' }]"
        />
        <van-field
          v-model.number="obj.travels[0].amountInsurance"
          label="保险费(合计)"
          placeholder="请输入保险费"
          input-align="right"
          type="number"
          @blur="calcTotal(obj.travels[0])"
          required
          :rules="[{ required: true, message: '请输入保险费' }]"
        />
        <van-field
          v-model.number="obj.travels[0].amountOther"
          label="其他费用(合计)"
          placeholder="请输入其他费用"
          input-align="right"
          :label-width="120"
          type="number"
          @blur="calcTotal(obj.travels[0])"
          required
          :rules="[{ required: true, message: '请输入其他费用' }]"
        />
        <div class="head-1">发票信息</div>
        <div class="head-2">发票自动解析目前只支持PDF格式的增值税电子发票，如无法解析，还需要手动修改发票代码等信息。</div>
        <div class="tabel-head">
          <van-row justify="center" align="center">
            <van-col span="4" class="tabel-head-a">业务环节</van-col>
            <van-col span="20" class="tabel-head-a">附件说明</van-col>
          </van-row>
          <van-row justify="center" align="center" v-for="(item, index) in obj.travelFeeFileList" :key="item.id">
            <div class="row-content">
              <van-col span="4" class="tabel-head-b">{{ showEnumLabel('ExpenditureFeetypeFileStage', item.stage) }}</van-col>
              <van-col span="20" class="tabel-head-b-b">
                <div class="tabel-head-top">
                  <div class="tabel-head-b-b-1">名称：{{ item.filename }}</div>
                  <div class="tabel-head-b-b-1">
                    <van-button type="danger" plain size="mini" v-if="item.control === '1'">*{{ showEnumLabel('ExpenditureFeetypeFileControl', item.control) }}</van-button>
                    <van-button type="warning" plain size="mini" v-else>{{ showEnumLabel('ExpenditureFeetypeFileControl', item.control) }}</van-button>
                  </div>
                </div>
                <div class="tabel-head-b-b-2" v-if="item.remark">说明：{{ item.remark }}</div>
              </van-col>
            </div>
            <div class="tabel-btns">
              <!-- <van-button type="primary" icon="upgrade" size="small">上传发票</van-button> -->
              <FileUpload :isShowTip="false" v-model="travelsFiles" :isShowFileList="false" @uploadedSuccess="travelsUploadedSuccessFn($event, item, index)" :disabled="oper === 'view'" v-if="item.needInvoice === '0'" />
              <InvoiceUpload :isShowTip="false" v-model="travelsFiles" :isShowFileList="false" @uploadedSuccess="travelsUploadedSuccessFn($event, item, index)" :disabled="oper === 'view'" v-else />
            </div>
            <ul class="files-url">
              <li v-for="(item1, idx) in item.itemFiles" :key="item1.id" :class="item1.isValidator || item.needInvoice === '0' ? 'files-green' : 'files-red'">
                <div class="file-text">
                  <div>
                    <span class="file-name">{{ item1.attachmentName }}</span>
                    <span class="file-kb">{{ bytesToSize(item1.attachmentSize) }}</span>
                  </div>
                  <div>
                    <span class="file-time">{{ showIdLabel(userList, item1.attachmentUploader, 'name') }}<span style="color:#333;">上传于</span>{{ item1.attachmentUpload }}</span>
                  </div>
                </div>
                <div class="file-btn">
                  <!-- <el-button type="primary" link @click="downloadFile(item1)">下载</el-button> -->
                  <el-button type="primary" link @click="handlePreview(item1)">预览</el-button>
                  <el-button type="primary" link v-show="item.needInvoice !== '0'" @click="item1.showModel = true">发票详情</el-button>
                  <el-button type="danger" link @click="deleteBtn(obj.travelFeeFileList, index, idx)">删除</el-button>
                  
                  <van-popup v-model:show="item1.showModel">
                    <div class="invoice-head">发票详情</div>
                    <div class="report-form-list-content report-form-list-content-be">
                      <van-field
                        v-model="item1.invoiceCode"
                        label="发票代码"
                        input-align="right"
                        :label-width="120"
                        @blur="codeValidatorFn(item1)"
                        required
                        :rules="[{ required: true, message: '请输入发票代码' }]"
                      />
                      <van-field
                        v-model="item1.invoiceNumber"
                        label="发票号码"
                        input-align="right"
                        :label-width="120"
                        @blur="codeValidatorFn(item1)"
                        required
                        :rules="[{ required: true, message: '请输入发票号码' }]"
                      />
                      <van-field
                        v-model="item1.invoiceDate"
                        label="开票日期"
                        input-align="right"
                        :label-width="120"
                      />
                      <van-field
                        v-model="item1.invoiceTotal"
                        label="价税合计（元）"
                        input-align="right"
                        type="number"
                        :label-width="120"
                      />
                      <van-field
                        v-model="item1.invoiceValid"
                        label="校验码"
                        input-align="right"
                        :label-width="120"
                      />
                      <van-field
                        v-model="item1.invoiceBuyerName"
                        label="发票名称"
                        input-align="right"
                        :label-width="120"
                      />
                      <van-field
                        v-model="item1.invoiceTotalText"
                        label="价税合计(大写)"
                        input-align="right"
                        :label-width="120"
                      />
                      <van-field
                        v-model="item1.invoiceTotal"
                        label="价税合计(小写)"
                        input-align="right"
                        :label-width="120"
                      />
                      <van-field
                        v-model="item1.invoiceSellerName"
                        label="销售方名称"
                        input-align="right"
                        :label-width="120"
                      />
                      <van-field
                        v-model="item1.invoiceSeller"
                        label="销售方纳税人识别号"
                        input-align="right"
                        :label-width="180"
                      />
                      <van-field
                        v-model="item1.invoiceSellerBank"
                        label="销售方开户行及账号"
                        input-align="right"
                        :label-width="180"
                      />
                      <van-field
                        v-model="item1.invoiceSellerInfo"
                        label="销售方地址/电话"
                        input-align="right"
                        :label-width="180"
                      />
                      <van-field
                        v-model="item1.invoicePayee"
                        label="收款人"
                        input-align="right"
                        :label-width="120"
                      />
                      <van-field
                        v-model="item1.invoicePrinter"
                        label="开票人"
                        input-align="right"
                        :label-width="120"
                      />
                      <van-field
                        v-model="item1.invoiceApprover"
                        label="复核"
                        input-align="right"
                        :label-width="120"
                      />
                    </div>
                  </van-popup>
                </div>
              </li>
            </ul>
            <van-divider />
          </van-row>
          
        </div>
      </van-form>
    </div>
    <div class="aggregate">
      <div class="">差旅天数: {{ totalDays }}</div>
      <div class="">差旅费用总计: ￥{{ totalAmount }}</div>
    </div>
    <van-popup v-model:show="isShowAttachment" z-index="100000000000000" :style="{ width: '100%',maxHeight: '90vh',  }">
      <attachmentPreview v-model:attachmentId="previewAttachmentId" />
    </van-popup>
  </div>
 
</template>

<script setup>
  import {computed, ref, watch} from 'vue'
  import {doGet, doDownload} from '@/config/http'
  import {parseTime} from "@/utils/ruoyi";
  import attachmentPreview from '@/h5/components/attachmentPreview.vue';
  import {
    svc,
    getDictList,
    showEnumLabel,
    bytesToSize,
    showIdLabel,
    getListPageSize,
    getDaysBetween, customValidator
  } from "@/config/common";
  import initListStore from '@/store/modules/initList'

  let currentDate1 = ref(parseTime(new Date().getTime(), '{y}-{m}-{d}').split('-'))
  let currentDate2 = ref(parseTime(new Date().getTime(), '{y}-{m}-{d}').split('-'))
  let isShowPickerDate1 = ref(false)
  let isShowPickerDate2 = ref(false)
  let showPicker1 = ref(false)
  let travelRankName = ref('')
  const feetype = ref('01')
  let travelsForm = ref(null)

let travels = ref(null)
let isShowAttachment = ref(false)

const props = defineProps({
  routeId: {
    type: String,
    default: ''
  },
  oper: {
    type: String,
    default: ''
  },
})

// 基本数据
const emptyTravel = {
  expenditureReimbursementId: null, // 报账单ID
  travelStart: null, // 开始日期
  travelEnd: null, // 结束日期
  travelPositionStart: null, // 开始地点
  travelPositionEnd: null, // 结束地点
  travelPeople: null, // 出差人
  travelNum: 1, // 出差人数
  travelRank: null, // 职级
  amountPlane: 0, // 机票费
  amountTrain: 0, // 动车火车费
  amountShip: 0, // 车船费
  amountCatering: 0, // 伙食补贴费
  amountHotel: 0, // 住宿费
  amountCar: 0, // 市内交通费
  amountInsurance: 0, // 保险费
  amountOther: 0, // 其他费
  id: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  deleted: null,
  version: null,
  total: 0, // 总计金额
}

let currentData = ref({
  row: null,
  index: null
})
let obj = ref({
  travels: [ Object.assign({}, emptyTravel) ],
  travelFeeFileList: []
})
console.log('obj-------------',obj.value)

let arrFiles = ref([])
// 发票信息必填项是否
let isValidator = ref(false)
let attachmentVisible = ref(false)
let previewAttachmentId = ref('')
let travelsFiles = ref(null) // 明细附件
let expenditureTravelQuotaDesc = ref(null) // 职级差旅限额描述

const emit = defineEmits(['travelsData'])

const userList = initListStore().userList

let selectAttachmentVisible = ref(false)

// initList()
watch(() => props.routeId, async val => {
  await initObj(val)
  // await initList()
},{immediate:true})

const totalAmount = computed(() => {
  let item = obj.value.travels[0]
  console.log('item',item)
  calcTotal(item)
  console.log('item.total------------',item.total)
  return item.total
});

const totalDays = computed(() => {
  return calcDays()
})

function calcDays() {
  return getDaysBetween(obj.value.travels[0].travelStart, obj.value.travels[0].travelEnd) ? getDaysBetween(obj.value.travels[0].travelStart, obj.value.travels[0].travelEnd) : 0
}


// 日期选择
const onConfirmDate1 = (date) => {
  console.log('date',date)
  obj.value.travels[0].travelStart = date.selectedValues.join('-')
  isShowPickerDate1.value = false
}

const onConfirmDate2 = (date) => {
  console.log('date',date)
  obj.value.travels[0].travelEnd = date.selectedValues.join('-')
  isShowPickerDate2.value = false
}

// 职级选择
const onConfirmPicker1 = async(data) => {
  console.log('data',data)
  obj.value.travels[0].travelRank = data.selectedOptions[0].key
  travelRankName.value = data.selectedOptions[0].value

  expenditureTravelQuotaDesc.value = ''
  let o = await doGet(svc, '/expenditure-travel-quota/listByField', {'field': 'rank', values: data.selectedOptions[0].key}, false)
  if (o.length > 0) {
    expenditureTravelQuotaDesc.value = "机票费限额:￥" + o[0].amountQuotaPlane +
        "，动车火车费限额:￥" + o[0].amountQuotaTrain +
        "，车船费限额:￥" + o[0].amountQuotaShip +
        "，酒店限额(含税):￥" + o[0].amountQuotaHotel + "/人天" +
        "，市内交通费限额:￥" + o[0].amountQuotaCar + "/人天" +
        "，差旅补贴:￥" + o[0].amountQuotaCatering + "/人天"
    console.log(o[0].amountQuotaCatering)
    obj.value.travels[0].amountCatering = o[0].amountQuotaCatering
  }
  showPicker1.value = false
}

// 获取下拉框数据列表
// async function initList() {
//   let p1 = doGet(svc, '/user/page', {pageSize: getListPageSize()}, false)
//   let resArray = await Promise.all([p1])
//   userList.value = resArray[0]['records']
// }

// 获取数据
async function initObj(id) {
  let list = await doGet(svc, '/expenditure-reimbursement-travel/listByField', {field: 'expenditureReimbursementId', values: id}, false)
  if (list.length > 0) {
    list.map(item => calcTotal(item))
    obj.value.travels = list
  }
  obj.value.travelFeeFileList = await doGet(svc, '/expenditure-feetype-file/listByField', {field: 'expenditureFeetype', values: feetype.value}, false) // 费用类型附件
  if (id) {
    arrFiles.value = await doGet(svc, '/expenditure-reimbursement-item-file/listByField', {field: 'expenditureReimbursementId', values: id}, false)
    console.log('arrFiles.value',arrFiles.value)
    fileOnList(obj.value.travelFeeFileList)
  }
  obj.value.travelFeeFileList.sort((a, b) => {
    return a.stage !== b.stage ? a.stage - b.stage : a.control !== b.control ? a.control - b.control : a.needInvoice !== b.needInvoice ? b.needInvoice - a.needInvoice : b.weight - a.weight
  })
}

function calcTotal(item) {
  let total = 0
  total += item.travelNum * item.amountPlane
  total += item.travelNum * item.amountTrain
  total += item.travelNum * item.amountShip
  total += item.travelNum * item.amountCatering * calcDays()
  total += item.travelNum * item.amountHotel
  total += item.amountCar
  total += item.amountInsurance
  total += item.amountOther
  console.log('item.total',item.total)
  item.total = total
}

const UploadedSuccessFn = (file, item, index, arr, type) => {
  console.log('file',file)
  console.log('item',item)
  console.log('index',index)
  console.log('arr',arr)
  console.log('type',type)
  let filesObj
  if (item.needInvoice === '0') {
    //不是发票
    filesObj = {
      deleted: 0,	//删除标识(0未删除、1已删除)		false
      expenditureFeetypeFileId: item.id,	//报账费用类型附件ID		false
      expenditureReimbursementFeetype: type,	//报账单明细费用类型		false
      expenditureReimbursementItemId: null,	//报账单明细ID		false
      attachmentId: file.id,	//附件ID		false
      attachmentName: file.original,	//附件名称		false
      attachmentUrl: file.url,	//附件URL		false
      attachmentSize: file.size, //附件大小
      attachmentUpload: file.createTime, //附件上传时间
      attachmentUploader: file.uploader, //附件上传人
      isInvoice: 'false',	//是否发票
    }
  } else {
    // 是发票
    filesObj = {
      deleted: 0,	//删除标识(0未删除、1已删除)		false
      expenditureFeetypeFileId: item.id,	//报账费用类型附件ID		false
      expenditureReimbursementFeetype: type,	//报账单明细费用类型		false
      expenditureReimbursementItemId: null,	//报账单明细ID		false
      attachmentId: file.id,	//附件ID		false
      attachmentName: file.original,	//附件名称		false
      attachmentUrl: file.url,	//附件URL		false
      attachmentSize: file.size, //附件大小
      attachmentUpload: file.createTime, //附件上传时间
      attachmentUploader: file.uploader, //附件上传人
      invoiceAmount: file.invoiceAmount,	//金额		false
      invoiceApprover: file.invoiceApprover,	//复核		false
      invoiceBuyer: file.invoiceBuyer,	//购买方纳税人识别号		false
      invoiceBuyerBank: file.invoiceBuyerBank,//	购买方开户行及账号		false
      invoiceBuyerInfo: file.invoiceBuyerInfo,	//购买方地址电话		false
      invoiceBuyerName: file.invoiceBuyerName,//	购买方名称		false
      invoiceCode: file.invoiceCode,	//发票代码		false
      invoiceDate: file.invoiceDate,	//开票日期		false
      invoiceMachine: file.invoiceMachine,	//机器编号		false
      invoiceNumber: file.invoiceNumber,	//发票号码		false
      invoicePayee: file.invoicePayee,	//收款人		false
      invoicePrinter: file.invoicePrinter,	//开票人		false
      invoiceRate: file.invoiceRate,	//税额		false
      invoiceSeller: file.invoiceSeller,	//销售方纳税人识别号		false
      invoiceSellerBank: file.invoiceSellerBank,	//销售方开户行及账号		false
      invoiceSellerInfo: file.invoiceSellerInfo,	//销售方地址电话		false
      invoiceSellerName: file.invoiceSellerName,	//销售方名称		false
      invoiceTotal: file.invoiceTotal,	//价税合计		false
      invoiceTotalText: file.invoiceTotalText,	//价税合计(大写)		false
      invoiceValid: file.invoiceValid,	//校验码		false
      isInvoice: 'true',	//是否发票		false
      isValidator: file.invoiceCode && file.invoiceNumber ? true : false
    }
  }
  filesObj.showModel = false
  console.log('filesObj------------------',filesObj)
  if (!arr[index].itemFiles) {
    arr[index].itemFiles = []
  }
  arr[index].itemFiles.push(filesObj)
}

const fileOnList = (arr) => {
  arr.forEach(item => {
    arrFiles.value.forEach(file => {
      if(item.needInvoice === '1') {
        file.isValidator = file.invoiceCode && file.invoiceNumber ? true : false
      }
    })
    item.itemFiles = arrFiles.value.filter(item1 => item1.expenditureFeetypeFileId === item.id)
  })
}

const codeValidatorFn = (obj) => {
  isValidator.value = obj.invoiceCode !== '' && obj.invoiceNumber !== ''
  obj.isValidator = isValidator.value
}

const travelsUploadedSuccessFn = (file, item, index) => {
  UploadedSuccessFn(file, item, index, obj.value.travelFeeFileList, feetype.value)
}

const downloadFile = (row) => {
  doDownload(svc, '/customAttachment/download/' + row.attachmentId, {})
}
const handlePreview = (file) => {
  isShowAttachment.value = true
  setTimeout(() => {
    previewAttachmentId.value = file.attachmentId
  },100)
}
const deleteBtn = (arr, index, idx) => {
  arr[index].itemFiles.splice(idx, 1)
}
// 已上传文件
const selectAttachmentBtn = (row,index) => {
  console.log('row------------',row)
  selectAttachmentVisible.value = true
  currentData.value.row = row
  currentData.value.index = index
}

const selectAttachmentFn = (list) => {
  if(list.length > 0) {
    list.map( async item => {
      let file = await doGet(svc, '/customAttachment/extractInvoice/' + item.attachmentId, {}, false)
      UploadedSuccessFn(file, currentData.value.row, currentData.value.index, obj.value.travelFeeFileList, feetype.value)
    })
  }
}

async function handleValidate() {
  return await travelsForm.value.validate().catch((err)=>{return err})
}

let travelsData = obj.value

console.log('travelsData',travelsData)

defineExpose({
  travelsData,
  handleValidate,
})
</script>

<style scoped lang="scss">

.travels {
  height: calc(100% - 6rem);
  overflow-y: auto;
}
.travels-content {
  width: 100%;
  overflow: hidden;
  // overflow-y: auto;
}
  .report-form-list-content {
    // color: #F56C6C;
    font-weight: bold;
    padding: 0 .625rem;
    font-size: .875rem;
  }
  .head-1 {
    padding: .625rem 0;
    padding-left: 1.25rem;
    font-size: 1rem;
    font-weight: bold;
  }
  .head-2 {
    color: #F56C6C;
    padding: 0 .625rem;
    font-size: .75rem;
    padding-left: 1.25rem;
  }
  .tabel-head {
    padding: .625rem .9375rem;
  }
  .tabel-head-a {
    font-size: 0.8rem;
    font-weight: 500;
    background-color: #39a9ed;
    color: #fff;
    padding: .625rem 0;
    text-align: center;
    border-right: 1px solid #fff;
  }
  .tabel-head-b {
    text-align: center;
  }
  .tabel-head-b, .tabel-head-b-b {
    font-size: .875rem;
    color: #303133;
  }
  .tabel-head-b-b-1 {
    max-width: 70%;
  }
  .tabel-head-top {
    display: flex;
    justify-content: space-between;
  }
  .tabel-head-b-b {
    margin-top: .3125rem;
    padding: 0 .625rem;
  }
  .tabel-head-b-b-2 {
    color: #928a8a;
    margin-top: .3125rem;
  }
  .tabel-btns {
    margin: .625rem 0;
    display: flex;
    justify-content: flex-end;
    
    width: 100%;
    
  }
  .file-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: .3125rem;
  }
  .row-content {
    width: 100%;
    display: flex;
    align-items: center;
    background: #eaffea;
    padding: .625rem 0;
  }
  .files-url {
    width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.files-url li {
  list-style-type: none;
  margin: 5px;
  padding: 0;
}
.files-url li.files-green {
  border: 1px solid #1ab394;
  background-color: #eaffea;
}
.files-url li.files-red {
  border: 1px solid #F56C6C;
  background-color: #fcf3f3;
}
.files-url li {
  width: 100%;
  padding: 5px 10px;
  .file-text {
    display: flex;
    align-items: center;
    
  }
}
.files-url li span {
  padding: 0 5px;
  font-size: 12px;
  font-weight: bold;
}
.el-upload__tip {
  padding: 10px 0;
  color: #F56C6C;
}
.invoice-head {
  margin: 1.25rem 0;
  font-size: 1rem;
  font-weight: bold;
  width: 100%;
  text-align: center;
  color: #303133;
}
.aggregate {
  width: 100%;
  height: 4rem;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #ebe1e1;
}
.aggregate div {
  margin-left: .625rem;
}
</style>